//切换到另一个界面
var web = document.querySelector(".web");
var mian = document.querySelector(".mian");
var start = document.querySelector(".getshow");
var finish = document.querySelector(".finish");
var switchs = document.querySelector(".switchs");
var overall = document.querySelector(".overall");
var away = document.querySelector(".switchs h2");
var gamelevel = document.querySelector(".gamelevel");
var startBth = document.querySelector(".overall button");
var gameBth = document.querySelector(".gamelevel button");
startBth.addEventListener("click", () => {
	startBth.parentNode.parentNode.style.transform = "translateX(-100%)";
});
gameBth.addEventListener("click", () => {
	gameBth.parentNode.style.transform = "translateX(-50%)";
});
getCircle();
//碰撞检测
function bump(box, show) {
	var boxInfo = box.getBoundingClientRect();
	var showInfo = show.getBoundingClientRect();
	var t1 = boxInfo.top;
	l1 = boxInfo.left;
	r1 = boxInfo.right;
	b1 = boxInfo.bottom;
	var t2 = showInfo.top;
	l2 = showInfo.left;
	r2 = showInfo.right;
	b2 = showInfo.bottom;
	if(r1 < l2 || l1 > r2 || t1 > b2 || b1 < t2) {
		console.log("未出现碰撞");
		return false;
	} else {
		console.log("发出警告:已碰撞！");
		return true;
	}
}
//随机生成圆
function getCircle() {
	var div = document.createElement("div");
	var clientW = overall.clientWidth;
	var clientH = overall.clientHeight;
	var divW = divH = Math.floor(Math.random() * 60 + 15);
	var divT = Math.floor(Math.random() * clientH);
	var divL = Math.floor(Math.random() * clientW);

	divT > clientH - divH ? divT = clientH - divH : "";
	divL > clientW - divW ? divL = clientW - divW : "";

	setTimeout(function() {
		div.style.width = `${divW}px`;
		div.style.height = `${divH}px`;
		div.style.top = `${divT}px`;
		div.style.left = `${divL}px`;
		div.style.borderRadius = "50%";
		div.style.backgroundColor = "#FFFFFF";
		div.style.position = "absolute";
		div.classList.add("last");
		web.appendChild(div);
	}, 5000);
	return div;
}
web.addEventListener("click", function(event) {
	//	判断是否为最后一个,是则创建新圆并进行检测,否则游戏结束
	if(event.target.classList.contains("last")) {
		event.target.classList.remove("last");
		setTimeout(function() {
					switchs.style.transform = "translateX(-200%)";
				},200);
		
		console.log("最后一球");
		var allBall = document.querySelectorAll(".web div");
		var newCircle = getCircle();
		(function check(target) {
			allBall.forEach((e,index) => {
				//  动态增加关卡
				away.innerText = "第" + (index +0) + "关卡";
				if(bump(e,target)) {
					target.remove();
					var newCircle = getCircle();
					check(newCircle);
				}
			})
		}(newCircle));
		setTimeout(function(){
			switchs.style.transform = "translateX(200%)";
		},4000);
	} else if(!event.target.classList.contains("web")) {
		alert("游戏结束。");
		setTimeout(function(){
		finish.style.transform = "translateY(0%)";
		},500);
		return
	}
})